<div
	[ngClass]="['bg' + default, 'text' + defaultInv]"
	class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32"
>
	<div class="flex flex-col justify-between">
		<div class="space-y-2">
			<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
			<div [ngClass]="['text' + plainInv]">Vivamus in nisl metus? Phasellus.</div>
		</div>
		<img src="assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64" />
	</div>
	<form class="space-y-6">
		<div>
			<label for="name" class="text-sm">Full name</label>
			<input
				id="name"
				class="w-full p-3 rounded"
				type="text"
				placeholder=""
				[ngClass]="['bg' + default]"
			/>
		</div>
		<div class="">
			<label for="email" class="text-sm">Email</label>
			<input
				id="email"
				class="w-full p-3 rounded"
				type="email"
				[ngClass]="['bg' + default]"
			/>
		</div>
		<div class="">
			<label for="message" class="text-sm">Message</label>
			<textarea
				id="message"
				rows="3"
				class="w-full p-3 rounded"
				[ngClass]="['bg' + default]"
			></textarea>
		</div>
		<button
			type="submit"
			class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded"
			[ngClass]="['bg' + primary, 'text' + contrast]"
		>
			Send Message
		</button>
	</form>
</div>
